<!doctype html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <title>用户信息列表</title>
  <link rel="stylesheet" href="./asset/css/components.css" />
  <link rel="stylesheet" href="./asset/css/bootstrap.css" />
  <link rel="stylesheet" href="./asset/css/plugins.css" />
  <link rel="stylesheet" href="./asset/css/main.css" />
  <link rel="stylesheet" href="./asset/css/themes.css" />
  <link rel="stylesheet" href="./asset/layui/css/layui.css" />
</head>

<body>
<div id="body">
  <div id="app">
    <ol class="breadcrumb">
      <li class="active"><a href="javascript:;">管理系统</a></li>
      <li>用户信息列表</li>
    </ol>
    <div class="barboxs">
      <div class="input-group" >
        <input style="height: 35px; font-size: 14px;" type="text"  placeholder="请输入用户名"   v-model="username" id="username" class="form-control input-lg"><span @click="find()"  class="input-group-addon btn btn-primary">搜索</span>
      </div>
      <button class="btn btn-info pull-left ml10" title="添加用户"
              onclick="openForm('添加用户','adduser.html')"><i class="fa fa-pencil-square-o"></i>
        添加用户</button>
      <button class="btn btn-danger pull-left ml10" title="批量删除" @click="datadel()"><i
              class="fa fa-trash-o"></i> 批量删除</button>
      <button class="btn btn-success pull-right ml10" title="刷新数据" onclick="location.reload()"><i
              class="fa fa-refresh"></i></button>
    </div>
    <div class="tablebox">
      <table class="table table-bordered table-hover table-striped">
        <thead>
        <tr>
          <th style="text-align: center" width="5">&nbsp;</th>
          <th style="text-align: center">用户名</th>
          <th style="text-align: center">密码</th>
          <th style="text-align: center">姓名</th>
          <th style="text-align: center">性别</th>
          <th style="text-align: center">年龄</th>
          <th style="text-align: center">联系方式</th>
          <th style="text-align: center"><i class="fa fa-bolt"></i> 操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in user" :key="item.id">
          <td style="text-align: center"><input type="checkbox" :value="item.id" v-model="ids"></td>
          <td style="text-align: center">{{ item.username }} </td>
          <td style="text-align: center">{{ item.password }}</td>
          <td style="text-align: center">{{ item.realname }}</td>
          <td style="text-align: center">{{ item.sex }}</td>
          <td style="text-align: center">{{ item.age }}</td>
          <td style="text-align: center">{{ item.tel }}</td>

          <td style="text-align: center">&nbsp;&nbsp;<a href="javascript:;" title="编辑" @click="getUserById(item.id)"><i
                  class="fa fa-pencil"></i></a>&nbsp;&nbsp;<a href="javascript:;"
                                                              @click="deleteUser(item.id)" title="删除"><i class="fa fa-trash-o"></i></a></td>
        </tr>
        </tbody>
      </table>
    </div>
    <!-- 存放分页的容器 -->
    <div id="layui" style="text-align: right"></div>
  </div>
</div>

<script type="text/javascript" src="./asset/js/jquery.min.js"></script>
<script type="text/javascript" src="./asset/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./asset/layui/layui.js"></script>
<script type="text/javascript" src="./asset/js/tool.js"></script>
<script type="text/javascript" src="./asset/js/axios.min.js"></script>
<script type="text/javascript" src="./asset/js/vue.js"></script>
<script type="text/javascript">
  const vue = new Vue({ // 实例化Vue对象
    el: '#app',// 绑定作用域
    data: { //定义数据 用于vue的双向绑定
      user: [],
      ids: [],// 定义批量删除的数组
      page: {},
      count: 0,
      page: 1,
      limit: 10,
    },
    created() { // 生命周期相关的函数
      this.loadTable(); // 调用查询用户信息的方法
    },
    methods: {
      loadTable: function () { // 查询用户信息的函数
        let _this = this;
        axios.get('http://127.0.0.1:8080/equipment/user/getUserByPage.action?page=' + _this.page + '&limit=' + _this.limit).then(result => {
          _this.user = result.data.data;
          _this.count = result.data.count;
          if (_this.page == 1) {
            _this.loadPage();
          }
        });
      },
      loadPage: function () { // 调用LayUI分页标签的使用
        layui.use(['laypage'], function () {
          const laypage = layui.laypage;
          laypage.render({
            elem: 'layui', // 定义标签显示
            count: vue.count, //数据量
            limit: vue.limit,//每页限制
            jump: function (obj, first) {
              if (!first) {
                vue.page = obj.curr;
                vue.loadTable();
              }
            }
          });
        })
      },
      deleteUser: function (id) { // 根据主键删除用户信息
        let _this = this;
        if (window.confirm('确定要删除这条记录吗？')) {
          axios.get('http://127.0.0.1:8080/equipment/user/deleteUser.action?id=' + id).then(result => {
            if (result.data.code > 0) {
              _this.loadTable();
            } else {
              alert('系统错误，请稍后再试');
            }
          });
        }
      },
      find: function () {
        /*   if (window.confirm('测试？')) */
        let _this = this;
        axios.get('http://127.0.0.1:8080/equipment/user/getUserByUsername.action?page=' + _this.page + '&limit=' + _this.limit+'&username=' + _this.username).then(result => {
          _this.user = result.data.data;
          _this.count = result.data.count;
          if (_this.page == 1) {
            _this.loadPage();
          }
        });
      },
      datadel: function () { // 批量删除用户信息
        let _this = this;
        if (window.confirm('确定要批量删除记录吗？')) {
          axios.post('http://127.0.0.1:8080/equipment/user/deleteUserByIds.action', _this.ids).then(result => {
            if (result.data.code > 0) {
              _this.loadTable();
            } else {
              alert('系统错误，请稍后再试');
            }
          });
        }
      },
      getUserById: function (id) { // 编辑按钮点击事件
        let url = 'edituser.html?id=' + id;
        layer_show('编辑用户', url, 1000, 500);
      },
    },
  });
</script>

</body>

</html>


